<template>
  <d2-container>
    <div class="muse_filter_box">
      <el-form ref="filtersForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="订单号" v-model="form.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="手机号" v-model="form.cellphone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select
                clearable 
                style="width:100%;"
                v-model="form.storeId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入门店"
                :remote-method="fnStoreList"
                :loading="loading">
                <el-option
                  v-for="item in storeList"
                  :key="item._id"
                  :label="item.name"
                  :value="item._id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
            <el-button @click="resetForm('filtersForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="muse_table_box">
      <div class="muse_control_box">
        <el-button class="muse_float_right" type="primary" @click="exportExcel()">导出Excel</el-button>
      </div>
    </div>
    <div class="muse_table_box">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="_id" label="订单id" />
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? '待付款': scope.row.status == 1 ? '已付款' : scope.row.status == 2 ? '退款' : scope.row.status == 3 ? '退款中' : scope.row.status == 4 ? '已发货' : '已退款' }}
            <!--  scope.row.status == 5 ? '撤销' : -->
          </template>
        </el-table-column>
        <el-table-column prop="products[0].voucher.title" label="兑换券名字" />
        <el-table-column prop="products[0].amount" label="兑换券数量" />
        <el-table-column prop="cellphone" label="手机号" />
        <el-table-column prop="totalPoint" label="积分总价" />
        <el-table-column label="核销状态">
          <template
            slot-scope="scope"
          >{{ scope.row.status == 0 ? '' : scope.row.userVoucher && scope.row.userVoucher.status == 1 ? '已使用' : '未使用' }}</template>
        </el-table-column>
        <el-table-column prop="useDate" label="核销时间">
          <template slot-scope="scope">{{ scope.row.useDate | date('YYYY-MM-DD HH:mm') }}</template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间">
          <template slot-scope="scope">{{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}</template>
        </el-table-column>
        <el-table-column prop="staff.cellphone" label="员工号码" />
        <el-table-column prop="staff.store[0].name" label="所在门店" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="$router.push({name: 'logistics', query: {id: scope.row._id}})" type="text" size="small">快递信息</el-button> -->
            <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
            <el-button
              v-if="scope.row.status != -1 && scope.row.status != 5 && scope.row.status != 0"
              @click="cancelOrder(scope.row)"
              type="text"
              size="small"
            >撤销</el-button>
            <el-button
              v-if="scope.row.status != -1 && scope.row.status != 5 && scope.row.status != 0 && !(scope.row.userVoucher && scope.row.userVoucher.status == 1)"
              @click="writeOffVoucher(scope.row)"
              type="text"
              size="small"
            >核销</el-button>
            <!-- <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="muse_pagination"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.page"
        :page-sizes="paging.pageSizeAry"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
      ></el-pagination>
    </div>
  </d2-container>
</template>

<script>
import tableMixin from "../mixins/tableMixin";
import {
  getVoucherOrderList,
  writeOffVoucher,
  cancelOrder,
  exportVoucherOrder,
  getStoreList
} from "@/api/admin";
import excel from "@/libs/util.excel.js";
export default {
  name: "orderByVoucherList",
  mixins: [tableMixin],
  data() {
    return {
      form: {
        id: "",
        cellphone: "",
      },
      loading: false,
      storeList: []
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData(value, type) {
      let params = {
        page:
          type === "page"
            ? value
              ? value
              : this.paging.page
            : this.paging.page,
        pageSize:
          type === "pageSize"
            ? value
              ? value
              : this.paging.pageSize
            : this.paging.pageSize,
      };
      params = Object.assign({}, params, this.form);
      const {
        code,
        data: { total, currentPage, data, pageSize },
      } = await getVoucherOrderList(params);
      this.paging.total = total;
      this.paging.pageSize = pageSize;
      this.paging.page = currentPage;
      this.tableData = data;
    },
    // 编辑该行
    editRow(row) {
      this.$router.push({
        name: "changeOrderByVoucher",
        query: { id: row._id },
      });
    },
    writeOffVoucher(row) {
      this.wrapConfirm(-1, "是否确认核销该订单?")
        .then(async () => {
          const data = await writeOffVoucher({ order: row._id });
          this.getTableData();
        })
        .catch(() => {});
    },
    // 撤销订单
    cancelOrder(row) {
      this.wrapConfirm(-1, "是否对该订单进行撤销？")
        .then(async () => {
          await cancelOrder({ order: row._id });
          this.getTableData();
        })
        .catch(() => {});
    },

    // 导出excel
    async exportExcel() {
      await exportVoucherOrder(this.form).then((res) => {
        excel.exportRaw(res.data, "兑换券订单");
      });
    },
    async fnStoreList(e) {
        const params = {
          name: e
        }
        this.loading = true
        const { data: { data }} = await getStoreList(params)
        this.loading = false
        this.storeList = data
      }
  },
};
</script>

<style scoped>
</style>
